<template>
	<scroll-view class="content" scroll-y="true" @scrolltolower="loadmore">
		<view class="lottery-ability">
			<image src="/static/img/zptitle.png"></image>
			<!--今日剩余{{count}}次 金币{{userinfo.integral}}/{{consume}}币/次-->
			<view class="goldstatus" v-if="free_count>0">
				<view>今日免费抽奖{{free_count}}次</view>
				<view>（试试手气吧）</view>
			</view>
			<view class="goldstatus" v-else>今日抽奖剩余{{count-free_count}}次</view>
			<view class="rule" @click="visible=true">
				活动<br>
				规则
			</view>
			<view class="dreawforwork" @click="freereceive">
				领取<br>
				次数
				<view :class="{'redpoint':flagredpoint}"></view>
			</view>
		</view>

		<image src="/static/img/caidai.png" class="caidai" mode=""></image>
		<view class="main">
			<image src="/static/img/this@2x.png" mode="scaleToFill" style="width: 157upx;height: 229upx;" class="center-img"
			 @click="start"></image>
			<view :class="['prize',iscircle?'circle':'']" :style=" 'transform: rotate(' +deg+ 'deg);  transition-duration: ' +ss+'s ;'  ">
				<view class="prize-item">
					<view class="prize-contents" v-for="(item,index) in prizelist" :key="index" :style="'transform: rotate(' +item.deg+ 'deg)'">
						<text :class="['prize-title',index%2===0?'font-yellow':'']">{{item.name}}</text>
						<image :src="item.icon" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的中奖记录-->
		<view class="prize-rocord">
			<!--金币数量-->
			<view class="surplusgold">
				剩余<text class="goldcolor">{{userinfo.integral}}</text>金币 <text v-if="free_count<=0" style="margin-left: 12rpx;">抽奖需{{consume}}币/次</text>
			</view>
			<view class="prize-tarbar">
				<view :class="['tarbar-item',hoverIndex==index?'itemhover':'']" v-for="(item,index) in bartitle" :key="index" @tap="selectedlist(index)">
					{{item}}
				</view>
			</view>

			<!--奖品记录列表-->
			<view v-if="hoverIndex==1" style="width: 100%;">
				<view class="prize-contant" v-if="recordlist.length>0">
					<view class="contant-item" v-for="(item,index) in recordlist" :key="index">
						<view class="contant-text">
							<view class="winnerprizes">
								<text>{{item.title}}</text>
								<text>{{item.value}}</text>
							</view>
							<view class="winnertimer">
								<text>{{item.add_time}}</text>
								<text>{{recordStatus[item.status-1]}}</text>
								<!--{{recordStatus[item.status+1]}}-->
							</view>
						</view>
					</view>
				</view>
				<view v-else class="prize-contant">
					<empty></empty>
				</view>
			</view>

			<!--碎片记录-->
			<view v-else class="fragment">
				<view class="fragment-item" v-for="(item,index) in recordlist" :key="index">
					<view class="fragment-prize">
						<image :src="item.image" mode="aspectFit"></image>
						<view class="fragment-group">
							<view :class="['fragment-group-item',citem.count<=0?'maskoption':'']" v-for="(citem,cindex) in item.child" :key="cindex">
								<text v-if="citem.count>0">{{citem.count}}</text>
							</view>
						</view>
					</view>
					<view class="prize-title">
						<text>{{item.title}}</text>
						<text class="prize-title-small">{{item.count}}/{{item.total}}</text>
					</view>
					<view class="change-button">立即兑换</view>
				</view>
				<!-- 	<view class="fragment-item">
					<view class="fragment-prize">
						<image src="../../static/image/computer.jpg" mode="aspectFill"></image>
						<view class="fragment-group">
							<view class="fragment-group-item" v-for="(item,index) in fragmentnum" :key="index">
								<text>2</text>
							</view>
						</view>
					</view>
					<view class="prize-title">
						<text>iphone11</text>
						<text class="prize-title-small">1/9</text>
					</view>
					<view class="change-button">立即兑换</view>
				</view> -->
			</view>
		</view>

		<!--用户中奖记录-->
		<view class="prizeuser">
			<view class="prizeuser-marks"></view>
			<swiper style="height: 60rpx;width:100%;" autoplay="true" vertical="true">
				<swiper-item class="swiperitems" v-for="(item,index) in winnerprize" :key="index">
					<image class="swiper-image" :src="item.avatar" mode="aspectFill"></image>
					<view class="eli">{{item.info}}</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 规则 -->
		<alert modeltitle="规则说明" :visible="visible">
			<view class="ruleinfo">
				<jyf-parser :html="treasure"></jyf-parser>
				<text style="color: #FF0000;font-weight: bold;" v-if="isIos">郑重声明：本活动由天天有礼官方独家提供，与苹果公司无关，苹果并非赞助商！</text>
			</view>
		</alert>
		<!--抽奖任务增加-->
		<alert :modeltitle="'剩余领取'+surplus+'次免费机会'" :visible="workvisible">
			<view class="ruleinfo">
				<view class="gotofinish" v-for="(item,index) in tasklist" :key="index">
					<view class="datatext">
						<text>{{item.title}} </text>
						<text style="color: #FF0000;font-weight: normal;font-size: 25rpx;">{{item.description}}</text>
					</view>
					<view @click="jointask(index)" class="finish" v-if="item.status==0">去完成</view>
					<view class="finish" v-else-if="item.status==1" @click="freedraw(index)">待领取</view>
					<view class="finishall" v-else>已领取</view>
				</view>

			</view>
		</alert>

		<!--中奖信息-->
		<!-- 	<view class="modal" :class="{show: modal}" @click="closeModal">
			<view class="modal-body" :class="{show: modal}" @click.stop>
				<view class="f-cc flex-column" style="margin-top: 300upx;">
					<view class="txt1" v-if="showTitle>0">恭喜您获得</view>
					<view class="txt2">{{modalTxt}}</view>
				</view>
				<image src="../../static/img/home_gb@2x.png" @click="closeModal" class="close" style="width: 48upx;height: 48upx;"></image>
			</view>
		</view> -->
		<!--中奖结果2-->
		<alert :visible="prizevisible" :modeltitle="modeltitle">
			<!--获取碎片奖励-->
			<view v-if="is_debris" class="fragment" style="justify-content: center;flex-direction: column;">
				<view class="fragment-item" style="transform: scale(1.2);">
					<view class="fragment-prize">
						<image :src="overpraise.data.image" mode="aspectFit"></image>
						<view class="fragment-group">
							<view v-for="(item,index) in fragmentnum" :key="index" :class="['fragment-group-item','maskoption',overpraise.data.index==index+1?'borderkuang':'']">
							</view>
						</view>
					</view>
				</view>
				<text class="together">集齐9个碎片即可兑换该商品</text>
				<view class="alertbuttons">
					<!--抽中相同碎片出现销毁按钮-->
					<view v-if="overpraise.data.status==1" class="alert-record" @click="destruction">销毁+5金币</view>
					<view v-else class="alert-record" @click="viewrecords">夺宝记录</view>
					<!--抽中相同碎片出现领取按钮-->
					<view v-if="overpraise.data.status==1" class="alert-agains" @click="receivething">立即领取碎片</view>
					<view v-else class="alert-agains" @click="oncemore">再来一次</view>
				</view>
			</view>
			<!--获取普通奖品-->
			<view v-else class="prizeshow">
				<image :src="overpraise.data.image"></image>
				<view class="recevibutton">
					<view class="receivething"  @click="adReceive">直接领取</view>
					<view class="receivething" style="background-color: #ff0000;" @click="adReceive('double')">翻倍领取</view>
				</view>

			</view>
		</alert>
		<!--全局载入-->
		<loadingpage v-if="globelloading"></loadingpage>
	</scroll-view>
</template>

<script>
	/**
	 * 幸运大转盘
	 */

	// 锁
	let luck = false;
	// 配置旋转角度数组
	let arr = [{
			deg: 0,
			index_deg: 0
		},
		{
			deg: 45,
			index_deg: 315
		},
		{
			deg: 90,
			index_deg: 270
		},
		{
			deg: 135,
			index_deg: 225
		},
		{
			deg: 180,
			index_deg: 180
		},
		{
			deg: 225,
			index_deg: 135
		},
		{
			deg: 270,
			index_deg: 90
		},
		{
			deg: 315,
			index_deg: 45
		}
	]

	export default {
		data() {
			return {
				flagredpoint: false, //待领取的抽奖机会
				globelloading: true,
				workvisible: false, //抽奖任务提示
				is_debris: false, //是否为碎片
				prizevisible: false, //提示中奖奖品
				fragment: true, //碎片
				fragmentnum: 9,
				recordStatus: ['未领取', '已领取', '放弃领取', '已销毁'],
				winnerprize: '', //中奖名单
				showTitle: true,
				modal: false, // 展示modal模块
				modalTxt: '', // 奖品
				ss: 2, // 旋转所用时间
				deg: 0, // 旋转角度
				prizelist: '',
				visible: false, //显示隐藏alert框
				modeltitle: '',
				bartitle: ['获得碎片', '夺宝记录'],
				hoverIndex: 0,
				recordlist: [], //我的中奖记录
				iscircle: true, //是否播放旋转动画
				count: 5,
				consume: 0, //抽奖每次消耗的金币数量
				receive_free_count: 0, //今日可以领取免费次数
				free_count: 0, //当前可使用的免费抽奖次数
				page: 1,
				total: 0,
				overpraise: {
					index: '',
					image: '',
					status: '', 
					data:''
				}, //中奖结果
				tasklist: '', //获取抽奖任务
				surplus: 0, //可领取免费抽奖的剩余次数,
				userinfo: '',
				isIos: false, //是否为IOS系统
				treasure: getApp().globalData.ruleconfig.treasure,
			}
		},
		onLoad(option) {
			//全局订阅事件（多次)
			uni.$on("closewindown", (option) => {
				//关闭alret提示框
				this.visible = option;
				this.prizevisible = option;
				this.workvisible = option;
				this.closeModal();
			});
			this.prize = arr;
			this.userinfo = uni.getStorageSync('user_info') ? uni.getStorageSync('user_info') : this.$Initdata;
			//console.log(uni.getStorageSync('user_info'));
			this.initprize();
			this.debrisList(); //获取碎片记录
			//this.turntableHistory(); //获取我的中奖记录
			//记录今天是否访问过此页面
			this.$redpoint(option);
			if (plus.os.name == 'iOS') {
				this.isIos = true
			}
		},
		onShow() {
			luck = false;
			//获取最新任务列表
			this.gettask();
		},
		watch: {
			prizelist() {
				this.globelloading = false;
			}
		},
		methods: {
			//免费领取次数
			freereceive() {
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				this.workvisible = true
			},

			//去参与免费机会
			jointask(index) {
				let taskitem = this.tasklist[index]
				//type为1跳转首页 2观看视频 3分享
				if (taskitem.action == 1) {
					uni.switchTab({
						url: taskitem.uri
					})
				} else if (taskitem.action == 2) {
					//观看视频奖励
					this.$ttylAd.show(this.$common.state.adpid, (res) => {
						if (res && res.isEnded) {
							this.$rewardAd('dreaw')
							//修改状态
							this.tasklist[index].status = 1
							// 正常播放结束
							console.log("onClose " + res.isEnded);
						} else {
							// 播放中途退出
							console.log("onClose " + res.isEnded);
						}
					}, (err) => {
						console.log(err) // {code: code, errMsg: message}
						this.$ShowMsg('状态异常', 'error')
					})
				} else if (taskitem.action == 3) {
					let _this = this;
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: getApp().globalData.ruleconfig.domain + "thirdParty/app/invite?state=" + _this.userinfo.recommend_id,
						title: '【' + _this.userinfo.nickname + '】' + '@你参与免费抽奖',
						summary: '天天有礼拥有众多商家提供的各类精美奖品，所有用户均可免费参与抽奖，中奖后的用户即可获得对应奖品',
						imageUrl: 'https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/logo/72x72.png',
						success: function(res) {
							_this.$HttRequest({
								url: '/task/share',
								param: ''
							}).then((res) => {
								if (res.status === 10000) {
									_this.gettask()
									_this.$ShowMsg('分享朋友朋友或群成功！')
								}
							}).catch((error) => {
								//异常错误
								_this.$ShowMsg('statusCode：' + error);
								console.log(error);
							})
						},
						fail: function(err) {
							console.log(err);
							_this.$ShowMsg('分享朋友失败！')
						}
					})
				} else {
					uni.navigateTo({
						url: taskitem.uri
					})
				}
			},

			//初始化奖品数据
			initprize() {
				//获取支付宝用户信息
				this.$HttRequest({
					url: '/turntable/lists',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						console.log(res);
						let prizedata = res.data.lists;
						prizedata.forEach((item, index) => {
							prizedata[index].deg = arr[index].deg;
							prizedata[index].index_deg = arr[index].index_deg;
						});
						this.prizelist = prizedata;
						this.count = parseInt(res.data.count) + parseInt(res.data.free_count); //抽奖总次数
						this.winnerprize = res.data.recordList; //中奖者
						this.consume = res.data.consume; //消耗金币数
						this.receive_free_count = res.data.receive_free_count; //当前还可以领取的免费次数
						this.free_count = res.data.free_count; //用户免费抽奖次数
						this.gettask();
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				});
			},
			//获取抽奖任务
			gettask() {
				let totalcase = 0
				this.$HttRequest({
					url: '/turntable/task',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						console.log(res);
						res.data.map((item, index) => {

							if (item.status == 1) {
								this.flagredpoint = true;
							}
							//状态为二表示已领取状态
							if (item.status < 2) {
								totalcase++
							}
						})
						this.surplus = totalcase
						this.tasklist = res.data
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				});
			},

			//碎片销毁+5金币
			destruction() {
				this.$HttRequest({
					url: '/turntable/destroyDebris',
					param: {
						id: this.overpraise.data.id
					}
				}).then((res) => {
					if (res.status === 10000) {
						this.prizevisible = false;
						this.closeModal();
						this.$changefield('integral', res.data.integral);
						this.$ShowMsg('销毁碎片成功+5金币！');
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				})

			},
			//弹框查看记录
			viewrecords() {
				this.prizevisible = false;
				this.closeModal();
				this.selectedlist(1);
			},
			//用户领取广告红包和广告金币 
			adReceive(type = 'sign') {
				let _this = this
				//_this.$ShowMsg('同意')
				if (type == 'double') {
					_this.$ttylAd.show(_this.$common.state.adpid, (res) => {
						if (res && res.isEnded) {
							// 翻倍领取奖励
							_this.receivething('double')
							//请求激励视频广告奖励
							_this.$rewardAd()
							console.log("onClose " + res.isEnded);
						} else {
							// 播放中途退出
							console.log("onClose " + res.isEnded);
						}
						// 可选预加载下一条广告数据，减少加载等待时间，调用此 API 不会显示loading，不影响业务
					}, (err) => {
						// 广告无法显示，输出错误信息，可以采集数据上报以便分析
						console.log(err) // {code: code, errMsg: message}
						_this.$ShowMsg('状态异常', 'error')
					})
				} else {
					_this.receivething()
				}
			},


			//用户领取奖励
			receivething(type = 'sign') {
				console.log(type)
				let url = '/turntable/receiveAward'
				//翻倍领取奖励
				if (type == 'double') {
					url = '/turntable/awardDouble'
				}
				this.$HttRequest({
					url: url,
					param: {
						id: this.overpraise.data.id
					}
				}, 'GET', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$changefield('integral', res.data.integral);
						this.$changefield('money', res.data.balance);
						//更新金币
						this.$set(this.userinfo, 'integral', res.data.integral)
						//关闭窗口
						this.prizevisible = false;
						//重置转盘
						this.closeModal();
						//如果是领取红包出现领取后的金额
						if (this.overpraise.data.type == "red_envelope") {
							let price = this.overpraise.data.value
							if(type=="double"){
								price = price.replace('元','')*2
							}
							this.$ShowMsg('已获得红包' + price+'元');
						} else {
							this.$ShowMsg('领取成功', 'success');
						}
					} else {
						this.$ShowMsg(res.message, 'error')
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				})
			},

			//领取免费抽奖次数
			freedraw(index) {
				this.$HttRequest({
					url: '/task/receive',
					param: {
						id: this.tasklist[index].id
					}
				}, 'GET', true).then((res) => {
					if (res.status === 10000) {
						this.tasklist[index].status = 2; //已领取
						this.workvisible = false;
						//增加免费次数
						this.free_count++
						//增加总次数
						this.count++
						//减少领取免费次数机会
						this.surplus--

						//查询是否还有需要领取的
						let flagrecive = '';
						//console.log(this.tasklist);
						this.tasklist.map((item, index) => {
							if (item.status == 1) {
								flagrecive += 1
							}
						})
						if (flagrecive.indexOf(1) == -1) {
							this.flagredpoint = false;
						}

						this.$ShowMsg('领取成功！');
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				})
			},

			//抽奖再来一次
			oncemore() {
				this.closeModal();
				this.prizevisible = false;
				this.selectedlist(0);
			},

			//选择类目
			selectedlist(index) {
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				this.hoverIndex = index;
				if (index == 1) {
					//历史记录
					this.recordlist = [];
					this.turntableHistory();
				} else {
					//碎片无总记录
					this.total = 0;
					//碎片记录
					this.debrisList();
				}
			},
			//获取用户碎片记录
			debrisList() {
				this.$HttRequest({
					url: '/turntable/debrisList',
					param: ''
				}).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.recordlist = res.data
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				});
			},

			//我的夺宝历史
			turntableHistory(pages) {
				console.log(pages);
				this.$HttRequest({
					url: '/turntable/turntableHistory',
					param: {
						page: pages
					}
				}).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.recordlist.push.apply(this.recordlist, res.data.data);
						this.total = res.data.total;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				});
			},
			//加载更多
			loadmore() {
				if (this.recordlist.length < this.total) {
					//当前页数
					let pages = this.page + 1;
					this.turntableHistory(pages);
				}
			},
			play(num) {
				this.deg = 360 * 4 + this.prizelist[num].index_deg + 20; //旋转4圈
				setTimeout(() => {
					this.count--;
					//后台返回的中奖数据
					this.showResult();
				}, this.ss * 1000);
			},

			start() {
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				if (luck) {
					return
				}
				luck = true // 关锁
				if (this.count <= 0) {
					this.$ShowMsg('你的抽奖次数已用完！');
					return;
				}
				this.iscircle = false;
				// let num = Math.floor(Math.random() * this.prizelist.length)
				// this.play(num)
				//发送请求获取中奖ID
				this.$HttRequest({
					url: '/turntable/lottery',
					param: ''
				}).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						//有免费抽奖次数
						if (this.free_count > 0) {
							this.free_count--
						} else {
							this.$ShowMsg('消耗' + this.consume + '金币');
						}

						let prizeIndex = '';
						this.prizelist.forEach((item, index) => {
							if (item.id == res.data.data.turntableId) {
								prizeIndex = index;
							}
						})
						//中奖结果
						this.overpraise = res.data;
						console.log(res.data); 
						//扣除抽奖金币
						this.$changefield('integral', res.data.integral);
						//重新赋值用户信息
						this.$set(this.userinfo, 'integral', res.data.integral)
						//转盘定位
						this.play(prizeIndex);
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
					console.log(error);
				})
			},


			//　展示结果
			showResult() {
				//let bvalue = this.overpraise.type != "red_envelope" ? this.overpraise.value : '';
				//let title = "恭喜您获得<span style='color:red'>" + this.overpraise.title + "</span>";
				let title= this.overpraise.hint
				if (this.overpraise.data.type == "debris") {
					this.modeltitle = title
					this.is_debris = true;
				} else {
					this.is_debris = false;
					this.modeltitle = title;
				}
				this.prizevisible = true;

			},

			//　关闭
			closeModal() {
				luck = false
				let s = this.ss
				this.modal = false
				this.ss = 0
				this.deg = 0
				setTimeout(() => {
					this.ss = s
				}, 100)
			}
		}
	}
</script>

<style lang="scss">
	.prizeshow {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 200rpx;
			height: 200rpx;
			margin: 20rpx 0;
		}

		.recevibutton {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.receivething {
				background-color: #ffca29;
				border-radius: 40rpx;
				width: 45%;
				height: 80rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}
		}

	}

	//碎片	
	.fragment {

		margin-bottom: 30rpx;
		width: 100%;
		flex-wrap: wrap;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.together {
			font-size: 25rpx;
			margin: 20rpx 0;
			margin-top: 40rpx;
			color: #808080;
		}

		.alertbuttons {
			display: flex;
			align-items: center;
			width: 100%;
			margin: 10rpx 0;
			justify-content: space-around;
			color: #1e1e1e;
			font-size: 28rpx;
			font-weight: bold;

			.alert-agains {
				background-color: #ffca29;
				border-radius: 40rpx;
				width: 220rpx;
				height: 80rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.alert-record {
				width: 200rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #e6e6e6;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.fragment-item {
			width: 325rpx;
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-bottom: 15rpx;

			.change-button {
				width: 85%;
				height: 70rpx;
				background-color: #efefef;
				color: #909090;
				border-radius: 40rpx;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				margin-bottom: 25rpx;
			}

			.prize-title {
				width: 90%;
				margin: 0 auto;
				height: 85rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;

				.prize-title-small {
					font-weight: normal;
					font-size: 25rpx;
					color: #ababab;
				}
			}

			.fragment-prize {
				width: 90%;
				margin: 0 auto;
				margin-top: 10rpx;
				border: 1rpx solid #f0f0f0;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 355rpx;

				image {
					width: 300rpx;
					height: 280rpx;
					// border: 1rpx solid #000;
				}

				.fragment-group {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

					//无碎片时出现遮罩
					.maskoption {
						background-color: rgba(255, 255, 255, 0.8);
					}


					.fragment-group-item {
						width: 92rpx;
						height: 115rpx;
						border: 2rpx solid #fff;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;

						text {
							color: #fff;
							background-color: #666666;
							border-radius: 50%;
							width: 28rpx;
							height: 28rpx;
							font-size: 18rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.borderkuang {
						border: 1rpx solid #FF560B;
						background: none;
					}
				}
			}
		}
	}

	page {
		background: linear-gradient(#4524b3, #842acb);
	}

	.swiper-image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin: 10rpx;
	}

	.swiperitems {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.eli {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 85%;
		}
	}

	//用户中奖记录
	.prizeuser {
		width: 580rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;

		// text-overflow: ellipsis;
		// white-space: nowrap;
		// overflow: hidden;
		position: fixed;
		color: #fff;
		font-size: 25rpx;
		left: 30rpx;
		top: 10rpx;
		border-radius: 20rpx;
		z-index: 22;
	}

	.prizeuser-marks {
		opacity: 0.5;
		position: fixed;
		left: 30rpx;
		top: 10rpx;
		border-radius: 20rpx;
		background-color: #000;
		width: 580rpx;
		height: 65rpx;
	}

	//中奖记录
	.prize-rocord {
		width: 88%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 auto;
		height: auto;



		.prize-contant {
			margin-bottom: 30rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 20rpx 0;

			.contant-item {
				width: 100%;
				display: flex;
				padding: 10rpx 0;
				border-bottom: 1rpx solid #f0f0f0;
				justify-content: center;
				align-items: center;

				.contant-text {
					display: flex;
					width: 90%;
					flex-direction: column;

					.winnerprizes {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #000;
						font-size: 28rpx;
					}

					.winnertimer {
						margin: 10rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 22rpx;
						color: #afafaf;
					}
				}
			}
		}

		.prize-tarbar {
			margin: 20rpx 0;
			width: 100%;
			padding: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #6d24ab;
			height: 88rpx;
			border-radius: 20rpx;
			color: #e3acf8;
			font-size: 30rpx;

			.tarbar-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.itemhover {
				background-color: #fff3e7;
				color: #a46c4e;
				height: 88rpx;
				border-radius: 20rpx;
				font-weight: bold;
				box-shadow: inset 0 0rpx 15rpx #eeae4a;
			}
		}
	}

	.rule {
		position: absolute;
		width: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 25rpx;
		font-weight: bold;
		top: 0;
		right: 0;

		z-index: 11;
		height: 80rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: #ea4e5a;
		border: 1rpx solid #fff;
		border-right: none;
	}

	.dreawforwork {
		position: absolute;
		width: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 25rpx;
		font-weight: bold;
		top: 100rpx;
		right: 0;

		z-index: 11;
		height: 80rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: #f4c946;
		border: 1rpx solid #fff;
		border-right: none;

		.redpoint {
			left: 10rpx;
			top: 10rpx;
			position: absolute;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #FF0000;
		}
	}

	.ruleinfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-size: 28rpx;

		flex: 1;

		.gotofinish {
			width: 100%;
			margin: 12rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.datatext {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
			}

			text {
				font-weight: bold;
			}

			.finish {
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(#842acb, #4524b3);
				//background-color: #6d24ab;
				color: #fff;
				width: 180rpx;
				height: 60rpx;
				font-size: 28rpx;
				border-radius: 20rpx;
			}

			.finishall {
				display: flex;
				justify-content: center;
				align-items: center;

				width: 180rpx;
				height: 60rpx;
				font-size: 28rpx;
				border-radius: 20rpx;


				background-color: #fff;
				border: 1rpx solid #842acb;
				color: #842acb;
			}
		}

		text {
			margin: 8rpx 0;
		}
	}


	.font-yellow {
		color: #ffee51;
	}

	.lottery-ability {
		position: relative;
		color: #fff;
		font-size: 25rpx;
		width: 100%;
		margin-top: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.goldstatus {
			margin: 0 auto;
			font-size: 25rpx;
			color: #f60;
			padding: 5rpx 15rpx;
			border-radius: 10rpx;
			background-color: #ffc;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		image {
			width: 579rpx;
			height: 241rpx;
		}

		text {
			position: absolute;
			bottom: 0;
			left: 240rpx;

		}

	}

	.font-color {
		color: #ff7743;
		font-weight: bold;
	}

	.frequency {
		width: 80%;
		height: 80rpx;
		border: 18rpx solid #511b7b;
		margin: 0 auto;
		border-radius: 35rpx;
		background-color: #511b7b;
		margin-bottom: 20rpx;
		box-shadow: 0rpx 0rpx 15rpx #511b7b;

		.frequency-item {
			border-radius: 20rpx;
			background-color: #fff;
			height: 80rpx;
			box-shadow: inset 0rpx 5rpx 10rpx #9133d9;

			.prize-info {
				font-size: 26rpx;
				color: #999999;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30rpx;
					height: 40rpx;
				}
			}
		}
	}

	.g_item {
		font-size: 24upx;
		color: #000;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;
	}



	.content {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		height: 100vh;



		.guize {
			width: 502upx;
			min-height: 350upx;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 3;
			background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
			border: 18upx solid #E4431A;
			border-radius: 16px;
			margin: 0 auto;
			padding: 20rpx 48rpx;
			/* box-sizing: border-box; */
			color: #fff;

			.title {
				text-align: center;
				margin-bottom: 28upx;
			}

		}

		.caidai {
			position: absolute;
			top: 0;
			left: 0;
			width: 750upx;
			height: 1024upx;
		}

		.surplusgold {
			margin: 0 auto;
			padding: 10rpx 20rpx;
			background-color: rgba(#000, 0.2);
			border-radius: 20rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;

			.goldcolor {
				margin: 0 5rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.main {
			position: relative;
			width: 624upx;
			height: 624upx;

			margin: 50rpx auto 39rpx;

			.turntable {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				// animation: rotateArc 5s cubic-bezier(0.61, 0.08, 0.35, 0.83);
				transform: rotate(0deg);
				z-index: 12;
				transition-timing-function: ease;
				transition-property: all;

				// transition: all 10s ease;
			}

			.center-img {
				position: absolute;
				top: 181upx;
				right: 0;
				left: 0;
				margin: auto;
				z-index: 18;
			}

			@keyframes xuanzhuan {
				0% {
					transform: rotate(0deg);
				}

				50% {
					transform: rotate(250deg);
				}

				100% {
					transform: rotate(0deg);
				}
			}

			//是否播放动画
			.circle {
				animation: xuanzhuan 12s 1s infinite;
			}

			//奖品数据
			.prize {
				position: relative;
				width: 624upx;
				height: 624upx;
				z-index: 14;
				background-image: url(../../static/img/zp.png);
				background-repeat: no-repeat;
				background-size: cover;

				.prize-item {
					position: relative;
					transform: rotate(-23deg);
					width: 100%;
					height: 100%;

					.prize-contents {
						box-sizing: border-box;
						position: absolute;
						top: 0;
						left: 36%;
						width: 180rpx;
						height: 50%;
						color: #9b23f4;
						display: flex;
						flex-direction: column;
						align-items: center;
						transform-origin: 50% 100%;

						image {
							width: 75rpx;
							height: 75rpx;
							margin-top: 20rpx;
						}

						.prize-title {
							font-size: 25rpx;
							margin-top: 65rpx;
						}
					}
				}
			}

			.shadow {
				position: absolute;
				bottom: -30upx;
				left: 0;
				right: 0;
				margin: auto;
				z-index: 1;
			}
		}

		.h1 {
			font-size: 32upx;
			text-align: center;
			color: #fff;
		}

		.h2 {
			width: 450upx;
			font-size: 22upx;
			color: #fff;
			margin-bottom: 22upx;
			margin: auto;
		}

		// .modal.show {
		// 	display: block;
		// }

		// .modal {
		// 	position: fixed;
		// 	top: -0;
		// 	right: 0;
		// 	bottom: 0;
		// 	left: 0;
		// 	background-color: rgba(0, 0, 0, .4);
		// 	z-index: 100;
		// 	display: none;

		// 	.modal-body.show {
		// 		animation: scaleFrames .4s cubic-bezier(.5, .49, .57, 1.41) forwards;
		// 	}

		// 	.modal-body {
		// 		position: absolute;
		// 		top: 0;
		// 		right: 0;
		// 		bottom: 0;
		// 		left: 0;
		// 		margin: auto;
		// 		width: 544upx;
		// 		height: 570upx;
		// 		background-size: 100% 100%;
		// 		background-image: url('../../static/img/zhuanpan_tanchaung@2x.png');
		// 		padding: 1upx;
		// 		transform: scale(0);

		// 		.txt1 {
		// 			font-size: 60upx;
		// 			font-family: Source Han Sans CN;
		// 			font-weight: 500;
		// 			color: rgba(255, 255, 255, 1);
		// 			line-height: 104upx;
		// 			text-shadow: 0upx -5upx 10upx rgba(253, 49, 58, 0.5);
		// 			text-align: center;
		// 		}

		// 		.txt2 {
		// 			font-size: 60upx;
		// 			font-family: Source Han Sans CN;
		// 			font-weight: 500;
		// 			color: rgba(255, 234, 58, 1);
		// 			line-height: 121upx;
		// 			text-align: center;
		// 		}

		// 		.close {
		// 			position: absolute;
		// 			left: 0;
		// 			right: 0;
		// 			bottom: -68upx;
		// 			margin: auto;
		// 		}
		// 	}
		// }
	}


	@keyframes scaleFrames {
		from {
			transform: scale(0);
		}

		to {
			transform: scale(1);
		}
	}

	@keyframes rotateArc {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(3600deg);
		}
	}
</style>
